<!--
 * @Author: jlzm
 * @Date: 2020-05-25 15:23:18
 * @LastEditors: jlzm
 * @LastEditTime: 2020-07-02 11:22:05
 * @FilePath: \MPShop\pages\common\pages\goods\goodsDetail.vue
--> 

<template>
	<!-- <view v-if="!loding" class="container"> -->
	<view v-if="loaded" :id="templateId" class="container">
		<!-- 商品失效展示 begin -->
		<empty
			v-if="expiredGoods"
			:src="baseTemplateFileUri + 'image/emptyStatus/common.png'"
			:showBtn="true"
			size="large"
			desc="商品已下架 ~"
		></empty>
		<!-- 商品失效展示 end -->

		<template v-else>
			<view class="por bd-b carousel">
				<swiper
					autoplay
					indicator-dots
					indicator-active-color="#fff"
					circular="true"
					duration="400"
					>
					<swiper-item
						class="swiper-item"
						v-for="(item, index) in goodsDetail.imagePathMain"
						:key="index"
					>
						<view class="image-wrapper">
							<image
								@click.stop="
									previewImage(
										goodsDetail.imagePathMain,
										index
									)
								"
								:src="baseFileUri + item"
								class="loaded"
								mode="aspectFill"
							></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- 活动状态区域 begin -->
				<!-- v-if="goodsDetail.activityType" -->

				<view
					v-if="goodsDetail.activityType !== 0"
					class="poa activity-wrap"
					>
					<!-- :style="{'background': baseTemplateFileUri + 'image/goods/activity_bg.png'}" -->

					<view class="por activity-wrap__content">
						<!-- <image
						:src="baseTemplateFileUri + 'image/goods/activity_bg.png'"
						class="poa activity-wrap__content-bg"
						></image> -->
						<view class="df df-r jc-sb activity-wrap__content-desc">
							<view
								:style="{
									color: themeStyles.auxiliaryColor,
									background: `linear-gradient(${themeStyles.mainColor}b3, ${themeStyles.mainColor})`
								}"
								class="activity-wrap-left"
							>
								<view class="activity-people">{{
									goodsDetail.activityName
								}}</view>
								<view class="activity-price-box">
									<view class="cut-price-box">
										<!-- v-if="!isChooseSpec" -->
										<template>
											<text class="price">{{
												goodsDetail.minActivityPrice[0]
											}}</text>
											<text class="decimal">{{
												goodsDetail
													.minActivityPrice[1] || "00"
											}}</text>
											<template
												v-if="
													goodsDetail.maxActivityPrice
														.length
												"
											>
												<text class="price-start"
													>起</text
												>
												<!-- <text class="price"> - {{goodsDetail.maxActivityPrice[0]}}</text>
                      							<text class="decimal">{{goodsDetail.maxActivityPrice[1] || '00'}}</text> -->
											</template>
										</template>

										<!-- <template v-else>
										<text class="price">{{goodsDetail.activityPrice[0]}}</text>
										<text class="decimal">{{goodsDetail.activityPrice[1] || "00"}}</text>
										</template> -->
									</view>
									<!-- <view class="tdl late-price">{{goodsDetail.priceOut}}</view> -->
								</view>
								<text
									:style="{
										'border-right-color':
											themeStyles.adronmentColor
									}"
									class="triangle"
								></text>
							</view>
							<view
								:style="{
									background: themeStyles.adronmentColor
								}"
								class="df df-c ai-c activity-countdown-box"
							>
								<view
									:style="themeStyles.textAuxiliaryColor"
									class="countdown-title"
									>距结束仅剩</view
								>
								<uni-countdown
									bgColor="rgba(0, 0, 0, .3)"
									:color="themeStyles.auxiliaryColor"
									:splitorColor="themeStyles.auxiliaryColor"
									:showDay="false"
									:hour="goodsDetail.countDown.hh"
									:minute="goodsDetail.countDown.mm"
									:second="goodsDetail.countDown.ss"
								>
								</uni-countdown>
							</view>
						</view>
					</view>
				</view>
				<!-- 活动状态区域 end -->
			</view>

			<!-- 商品简介 begin -->
			<view class="introduce-section">
				<view class="title-wrap">
					<!-- <view
					v-if="goodsDetail.activityType === 10"
					class="dib df df-r activity-num tac vam"
					>{{goodsDetail.groupPeopleNum}}人拼团</view> -->
					<text class="title vam">{{ goodsDetail.goodsName }}</text>
				</view>
				<view class="df jc-sb">
					<!-- 主题色 -->
					<view :style="themeStyles.textMainColor" class="price-box">
						<view class="cut-price-box">
							<!-- v-if="!isChooseSpec" -->
							<template>
								<text class="price">{{
									goodsDetail.minPrice[0]
								}}</text>
								<text class="decimal">{{
									goodsDetail.minPrice[1] || "00"
								}}</text>
								<template v-if="goodsDetail.maxPrice.length">
									<text class="price-start">起</text>
									<!-- <text class="price">{{goodsDetail.maxPrice[0]}}</text>
              						<text class="decimal">{{goodsDetail.maxPrice[1] || '00'}}</text> -->
								</template>
							</template>
							<text
								v-if="goodsDetail.priceOut"
								class="tdl late-price"
								>{{ goodsDetail.priceOut }}</text
							>
							<!-- <template v-else>
								<text class="price">{{goodsDetail.price[0]}}</text>
								<text class="decimal">{{goodsDetail.price[1] || '00'}}</text>
							</template> -->
											<!-- 				<text class="m-price">￥488</text>
								<text class="coupon-tip">7折</text> -->
						</view>
					</view>
				</view>
				<view @click="toggleShareMask('show')" class="share-box">
					<button class="btn" plain>
						<uni-icon size="28rpx" name="share"> </uni-icon>
						<text class="text">分享</text>
					</button>
					<!-- <button class="btn" plain open-type="share">
						<uni-icon size="28rpx" name="share"> </uni-icon>
						<text class="text">分享</text>
					</button> -->
				</view>
			</view>
			<!-- 商品简介 end -->

			<!-- 其他信息 begin -->
			<view class="meta-section" v-show="!goodsJustShow">
				<view class="meta-section__title">
					<view class="df ai-c tit">
						<text>库存 {{ goodsDetail.stock || "0" }}</text>
					</view>
					<view class="content">
						<!-- <uni-icon
							name="address"
							size="40rpx"
						></uni-icon> -->
						<!-- <text>5948</text> -->
					</view>
					<view>月销 {{ goodsDetail.sale || "0" }}</view>
				</view>
				<template>
					<template v-if="goodsDetail.activityType !== 0">
						<view
							v-if="goodsDetail.activityType === 10"
							class="meta-section__game"
							>玩法：发起拼团后，邀请好友参团，达到参团人数后拼团成功，以优惠的拼团价格完成交易。
						</view>
						<view
							v-else-if="goodsDetail.activityType === 20"
							class="meta-section__game"
							>玩法：发起砍价后，邀请众多好友帮忙砍价。完成砍价后，以优惠的砍价价格完成交易。
						</view>
					</template>

					<template v-else>
						<view
							@click="
								showSpecPop(
									goodsDetail.goodsId,
									goodsDetail.activityType,
									3
								)
							"
							class="meta-section__spec"
						>
							<text class="tit">规格</text>
							<view class="right">
								<text v-if="isChooseSpec" class="right-text">{{
									goodsDetail.valueNames
								}}</text>
								<text v-else class="right-text"
									>请选择规格</text
								>
								<uni-icon size="28rpx" name="right"> </uni-icon>
							</view>
							<!-- <text class="fyicon icon-right"></text> -->
						</view>
					</template>
				</template>
			</view>
			<!-- 其他信息 end -->

			<view class="detail-desc">
				<view class="d-header">
					<text>商品详情</text>
				</view>
				<!-- <rich-text :nodes="desc"></rich-text> -->
				<view
					v-for="(item, index) in goodsDetail.imagePathDetails"
					:key="index"
					class="desc-list"
				>
					<image
						style="width:100%; display:block;"
						:src="baseFileUri + item"
						mode="widthFix"
					/>
				</view>
			</view>

			<!-- 底部操作菜单 -->
			<view class="page-bottom">
				<view class="page-bottom-box">
					<navigator
						url="/pages/tabbar/index"
						open-type="switchTab"
						class="p-b-btn"
						>
						<uni-icon size="44rpx" name="home"> </uni-icon>
						<text class="page-bottom-name">首页</text>
					</navigator>
					<navigator
						url="/pages/tabbar/cart"
						open-type="switchTab"
						class="p-b-btn"
						>
						<uni-icon
							:color="hasCartNum && themeStyles.mainColor"
							size="44rpx"
							:name="(hasCartNum && 'cart_full') || 'cart'"
						>
						</uni-icon>
						<text class="page-bottom-name">购物车</text>
					</navigator>
					<view class="p-b-btn" @click="onToggleGoodsCollect">
						<uni-icon
							:color="favorite && themeStyles.mainColor"
							size="44rpx"
							name="favorite"
						>
						</uni-icon>

						<text class="page-bottom-name">收藏</text>
					</view>
					<!-- 普通商品按钮区域 begin -->
					<template
						v-if="
							showOperationButton(
								goodsDetail.activityType,
								'1101'
							)
						"
						>
						<!-- 未登录 begin -->
						<view v-if="!hasLogin" class="action-btn-group">
							<template v-if="!goodsJustShow">
								<button
									@click.stop="
										readyShowSpec(
											goodsDetail.goodsId,
											goodsDetail.activityType,
											0
										)
									"
									open-type="getUserInfo"
									@getuserinfo="loginShowSpecPop"
									type="primary"
									:style="themeStyles.btnLightAuxiliaryColor"
									class=" action-btn no-border add-cart-btn"
								>
									加入购物车
								</button>
								<button
									@click.stop="
										readyShowSpec(
											goodsDetail.goodsId,
											goodsDetail.activityType,
											1
										)
									"
									open-type="getUserInfo"
									@getuserinfo="loginShowSpecPop"
									type="primary"
									:style="themeStyles.btnFullColor"
									class=" action-btn no-border buy-now-btn"
								>
									立即购买
								</button>
							</template>
							<!-- 商品仅展示 -->
							<template v-else>
								<button
									type="primary"
									:style="themeStyles.btnJustShow"
									class="action-btn just-show no-border buy-now-btn"
								>
									商品仅展示，请到店消费
								</button>
							</template>
						</view>
						<!-- 未登录 end -->

						<!-- 已登录 begin -->
						<view v-if="hasLogin" class="action-btn-group">
							<template v-if="!goodsJustShow">
								<button
									type="primary"
									:style="themeStyles.btnLightAuxiliaryColor"
									class=" action-btn no-border add-cart-btn"
									@click="
										showSpecPop(
											goodsDetail.goodsId,
											goodsDetail.activityType,
											0
										)
									"
								>
									加入购物车
								</button>
								<button
									type="primary"
									:style="themeStyles.btnFullColor"
									class=" action-btn no-border buy-now-btn"
									@click="
										showSpecPop(
											goodsDetail.goodsId,
											goodsDetail.activityType,
											1
										)
									"
								>
									立即购买
								</button>
							</template>
							<!-- 商品仅展示 -->
							<template v-else>
								<button
									type="primary"
									:style="themeStyles.btnJustShow"
									class="action-btn just-show no-border buy-now-btn"
								>
									商品仅展示，请到店消费
								</button>
							</template>
						</view>
						<!-- 已登录 end -->
					</template>
					<!-- 普通商品按钮区域 end -->

					<!-- 活动商品按钮区域 begin -->
					<template v-else>
						<view v-if="!hasLogin" class="action-btn-group">
							<template v-if="!goodsJustShow">
								<button
									@click.stop="
										readyShowSpec(
											goodsDetail.goodsId,
											goodsDetail.activityType,
											3
										)
									"
									open-type="getUserInfo"
									@getuserinfo="loginShowSpecPop"
									type="primary"
									:style="themeStyles.btnLightAuxiliaryColor"
									class=" action-btn no-border add-cart-btn"
								>
									{{
										goodsDetail.activityType === 10
											? "单独购买"
											: "原价购买"
									}}
								</button>
								<button
									@click.stop="
										readyShowSpec(
											goodsDetail.goodsId,
											goodsDetail.activityType,
											4
										)
									"
									open-type="getUserInfo"
									@getuserinfo="loginShowSpecPop"
									type="primary"
									:style="themeStyles.btnFullColor"
									class=" action-btn no-border buy-now-btn"
								>
									{{
										activityData.joinActivityId
											? "参与"
											: "发起"
									}}{{
										goodsDetail.activityType === 10
											? "拼团"
											: "砍价"
									}}
								</button>
							</template>
							<!-- 商品仅展示 -->
							<template v-else>
								<button
									type="primary"
									:style="themeStyles.btnJustShow"
									class="action-btn just-show no-border buy-now-btn"
								>
									商品仅展示，请到店消费
								</button>
							</template>
						</view>
						<view v-if="hasLogin" class="action-btn-group">
							<template v-if="!goodsJustShow">
								<button
									type="primary"
									:style="themeStyles.btnLightAuxiliaryColor"
									class=" action-btn no-border add-cart-btn"
									@click="
										showSpecPop(
											goodsDetail.goodsId,
											goodsDetail.activityType,
											3
										)
									"
								>
									{{
										goodsDetail.activityType === 10
											? "单独购买"
											: "原价购买"
									}}
								</button>
								<button
									type="primary"
									:style="themeStyles.btnFullColor"
									class=" action-btn no-border buy-now-btn"
									@click="
										showSpecPop(
											goodsDetail.goodsId,
											goodsDetail.activityType,
											4
										)
									"
								>
									{{
										activityData.joinActivityId
											? "参与"
											: "发起"
									}}{{
										goodsDetail.activityType === 10
											? "拼团"
											: "砍价"
									}}
								</button>
							</template>
							<!-- 商品仅展示 -->
							<template v-else>
								<button
									type="primary"
									:style="themeStyles.btnJustShow"
									class="action-btn just-show no-border buy-now-btn"
								>
									商品仅展示，请到店消费
								</button>
							</template>
						</view>
					</template>
					<!-- 活动商品按钮区域 begin -->
				</view>
			</view>

			<!-- 规格弹出层 begin -->
			<specPop
				@toggleSpec="toggleSpec"
				@onNowBuy="onNowBuy"
				@onAddGoodsToCart="onAddGoodsToCart"
				:actionBuyType="actionBuyType"
				:showPriceStatus="showPriceStatus"
				:specClass="specClass"
				:goodsDetail="specClass === 'show' && specGoods"
			>
			</specPop>
			<!-- :goodsDetail="specClass === 'show' && JSON.parse(JSON.stringify(specGoods))" -->
			<!-- 规格弹出层 end -->
		</template>
		<!-- 分享相关 begin -->
		<view
			class="share-mask"
			:class="
				showShareMask === 0 ? 'none' : showShareMask === 1 ? 'show' : ''
			"
			@click="toggleShareMask('none')"
			>
			<view class="btn-group">
				<button open-type="share" class="share-type-btn">
					发送给好友
				</button>
				<button @click.stop="drawPoster()" class="share-type-btn">
					生成海报
				</button>
				<button
					@click.stop="toggleShareMask('none')"
					class="share-type-btn cancel-btn"
				>
					取消
				</button>
			</view>
		</view>
		<!-- 海报相关 begin -->
		<view v-if="qrShow" @click="qrShow = false" class="poster-wrap">
			<image
				@click.stop.prevent="stopPrevent"
				@touchmove.stop.prevent="stopPrevent"
				:src="posterObj.finalPath || ''"
				class="poster-image"
				mode="widthFix"
				show-menu-by-longpress
			></image>
			<button @click.stop="saveImage()" class="save-image-btn">
				保存图片
			</button>
		</view>
		<!-- 海报相关 end -->

		<!-- 画布 begin -->
		<view class="hide-canvas-box">
			<canvas
				class="hide-canvas"
				:canvas-id="posterCanvasId"
				:style="{
					width: (posterObj.width || 0) + 'px',
					height: (posterObj.height || 0) + 'px'
				}"
			></canvas>
		</view>
		<!-- 画布 end -->
		<!-- 分享相关 end -->
	</view>
</template>

<script>
/** api begin */
import { 
	queryGoodsDetail  //获取商品详情
} from "@/lib/api/goodsServer/goods";
// import { updateCard } from "@/lib/api/interestedServer/cart";
import { updateGoodsCollect } from "@/lib/api/interestedServer/goodsCollect";
import { queryCartCount } from "@/lib/api/interestedServer/cart";
import { 
	queryGoodsShare //分享商品
} from "@/lib/api/distributorServer/share";
/** api end */
import { baseFileUri } from "@/utils/request/baseConfig";

import { mapState } from "vuex";

/** mixins begin */
import specPopMixin from "@/mixins/goods/specPop";
/** mixins end */

/** hub begin */
import { 
	analyzeQr //通过分享进入页面，保存商品分享id
} from "@/lib/analyzeQr";
/** hub end */

/** components begin */
import uniIcon from "@/components/uniIcon/uniIcon";
import specPop from "@/components/goods/specPop";
import empty from "@/components/empty";
import uniCountdown from "@/components/uniCountdown/uniCountdown";
/** components end */

import drawPosterApp from "@/utils/sharePoster/app";
import { getSharePoster } from "@/utils/sharePoster/sharePoster";

/** 内部参数（不在页面使用） begin */

/** 内部参数（不在页面使用） end */
export default {
	mixins: [specPopMixin],
	components: {
		specPop,
		uniIcon,
		empty,
		uniCountdown
	},

	data() {
		return {
			expiredGoods: false, // 商品是否失效
			hasCartNum: null,
			baseFileUri,
			loding: true, // 数据是否加载完毕
			isChooseSpec: false, // 是否选择了规格
			buyNum: 1, // 购买数量
			goodsId: "", // 商品id
			specSelected: [], // 已选择的规格
			specDetailData: {}, // 商品规格
			favorite: null, // 是否收藏
			favoriteLoading: false,
			goodsDetail: {},
			shareList: [],
			desc: "",
			specList: [],
			option: null,
			queryCartCountTimer: null,
			/** 海报相关 begin */
			showShareMask: 0,
			posterObj: {},
			qrShow: false,
			posterCanvasId: "sharePoster1101",
			/** 海报相关 end */
			/* 商品仅展示 begin */
			goodsJustShow:false,
			/* 商品仅展示 end */
		};
	},

	computed: {
		...mapState("activity", ["activityData"])
	},

	async onLoad(option) {
		//  从分享进入页面
		this.option = option;
		console.log("---携带的参数---",option);
		this.goodsId = option.goodsId || "";
		// 商品仅展示
		this.goodsJustShow = (option.justShow&&option.justShow=="1")?true:false;
		//
		//this.$api.showToast(`${this.goodsJustShow}`);
	},

	async onShow() {
		try {
			await analyzeQr(this.option);
		} catch (error) {
			console.log("error", error);
		}
		//  
		this.isChooseSpec = false;
		//  
		await this.getGoodsDetail();
		//  
		await this.getCartCount();
		//
		console.log(this.activityData);
	},

	onHide() {
		clearInterval(this.getCartCountTimer);
	},

	onUnload() {
		clearInterval(this.getCartCountTimer);
	},

	//下拉刷新
	onPullDownRefresh() {
		this.isChooseSpec = false;
		this.getGoodsDetail();
	},

	onShareAppMessage(res) {
		return {
			title: "我发现一个好商品，一起来看看吧！",
			path: `/pages/common/pages/goods/goodsDetail?goodsId=${this.goodsId}`
		};
	},

	methods: {
		// 获取购物车数量
		async getCartCount() {
			try {
				const res = await queryCartCount({
					showLoading: false
				});
				if (res.data > 0) {
					this.hasCartNum = res.data;
				} else {
					this.hasCartNum = null;
				}
			} catch (error) {
				console.log("error", error);
			}
		},

		/**
		 * 显示操作按钮
		 * @param { Number } activityType  0无活动，10拼团，20砍价，30限时折扣
		 * @param { String } type // 1101: 普通; 2101: 拼团; 2102: 砍价
		 */
		showOperationButton(activityType, type) {
			const general = activityType === 0 || activityType === 30,
				team = activityType === 10,
				bargain = activityType === 20;
			switch (type) {
				case "1101":
					return general;  // 普通商品
				case "2101":
					return team;  // 拼团商品
				case "2102":
					return bargain;  // 砍价商品
				default:
					break;
			}
		},

		// 收藏商品
		async onToggleGoodsCollect(e) {
			if (!this.hasLogin) {
				uni.navigateTo({ url: "/pages/common/pages/login/login" });
				return;
			}
			if (this.favoriteLoading) return;

			this.favoriteLoading = true;
			const propsData = {
				goodsId: this.goodsDetail.goodsId
			};
			try {
				const res = await updateGoodsCollect(propsData);
				let msg = "成功收藏";
				this.favorite = !this.favorite;
				console.log("this.favorite", this.favorite);
				if (!res.data.collected) {
					msg = "取消收藏";
				}
				await this.$api.showToast(msg);
				this.favoriteLoading = false;
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo);
			}
		},

		//规格弹窗开关
		toggleSpec() {
			if (this.specClass === "show") {
				this.specClass = "hide";
				setTimeout(() => {
					this.specClass = "none";
				}, 250);
			} else if (this.specClass === "none") {
				this.specClass = "show";
			}
		},
		/**  规格 end */

		// 查询商品详情
		async getGoodsDetail() {
			const propsData = {
				goodsId: this.goodsId
			};

			try {
				const { data } = await queryGoodsDetail(propsData);
				console.log("---商品详情---",data);
				const goodsDetail = (this.goodsDetail = data);
				/* 是否收藏 */
				this.favorite = goodsDetail.collect;

				/** 处理价格 begin */
				goodsDetail.minPrice = `${goodsDetail.minPrice}`.split(".");
				if (goodsDetail.maxPrice) {
					goodsDetail.maxPrice = `${goodsDetail.maxPrice}`.split(".");
				}
				/** 处理价格 end */
				/* 活动商品 */
				if (goodsDetail.activityType !== 0) {
					goodsDetail.minActivityPrice = `${goodsDetail.minActivityPrice}`.split(
						"."
					);
					if (goodsDetail.maxActivityPrice) {
						goodsDetail.maxActivityPrice = `${goodsDetail.maxActivityPrice}`.split(
							"."
						);
					}
				}

				this.loaded = true;
			} catch (error) {
				console.log("error", error);
				this.loaded = true;
				this.expiredGoods = true;
				// this.$api.showToast(error.resultInfo || "加载失败");
				// uni.navigateBack();
			}
		},

		/** jlzm end */

		// 生成海报
		async drawPoster() {
			this.showShareMask = 0;
			const _this = this;
			const sizeNum = 2;
			try {
				drawPosterApp.log("准备生成");

				const drawGoodsData = await this.getGoodsShare(sizeNum);
				console.log("drawGoodsData", drawGoodsData);
				const draw = await getSharePoster({
					_this,
					type: "goodsShareType",
					posterCanvasId: this.posterCanvasId,
					delayTimeScale: 20,
					drawDelayTime: 20,
					background: {
						width: 335 * sizeNum,
						height: 502 * sizeNum,
						backgroundColor: "#ffffff"
					},
					// drawArray: drawGoodsData,
					drawArray: ({ bgObj, type, bgScale }) => {
						return new Promise((resolve, reject) => {
							resolve(drawGoodsData);
						});
					},
					setCanvasWH: ({ bgObj, type, bgScale }) => {
						this.posterObj = bgObj;
					}
				});
				this.posterObj.finalPath = draw.poster.tempFilePath;
				console.log("this.posterObj", this.posterObj);
				this.qrShow = true;
			} catch (error) {
				drawPosterApp.hideLoading();
				console.log("error", error);
				console.log("error2", JSON.stringify(error));
				this.$api.showToast("生成失败*__*");
			}
		},

		// 获取商品分享数据--生成海报
		async getGoodsShare(sizeNum) {
			const propsData = {
				appletType: 100,  //分享小程序类型，100丰赢商城，200门店（必传）
				itemId: this.goodsDetail.goodsId
			};
			let priceLength = 0;

			let currentPrice = [];
			if (this.goodsDetail.activityType !== 0) {
				currentPrice = this.goodsDetail.minActivityPrice;
			} else {
				currentPrice = this.goodsDetail.minPrice;
			}

			const { data } = await queryGoodsShare(propsData);
			console.log("商品分享的数据---",data);
			return [
				{
					type: "image",
					url: data.imagePath,
					dx: 16 * sizeNum,
					dy: 16 * sizeNum,
					roundRectSet: {
						r: 6 * sizeNum
					},
					infoCallBack(imageInfo) {
						console.log("imageInfo", imageInfo);
						return {
							dWidth: 303 * sizeNum,
							dHeight: 303 * sizeNum
						};
					}
				},
				{
					type: "text",
					text: data.goodsName,
					size: 16 * sizeNum,
					color: "#333333",
					textAlign: "left",
					dx: 16 * sizeNum,
					dy: 338 * sizeNum,
					fontWeight: "600",
					lineFeed: {
						maxWidth: 303 * sizeNum,
						lineNum: 2,
						lineHeight: 24 * sizeNum
					}
				},
				{
					type: "text",
					text: "￥",
					size: 18 * sizeNum,
					color: this.themeStyles.mainColor,
					textAlign: "left",
					dx: 16 * sizeNum,
					fontWeight: "500",
					dy: 402 * sizeNum
				},
				{
					type: "text",
					text: `${currentPrice[0]}.${currentPrice[1] || "00"}`,
					size: 28 * sizeNum,
					color: this.themeStyles.mainColor,
					textAlign: "left",
					dx: 32 * sizeNum,
					dy: 399 * sizeNum,
					fontWeight: "bold"
					// serialNum: 1
					// infoCallBack(textLength) {
					// 	console.log("textLength", textLength);
					// 	priceLength = Math.floor(textLength / 2);
					// }
				},
				// {
				// 	type: "text",
				// 	text: currentPrice[1] || "00",
				// 	size: 24 * sizeNum,
				// 	color: this.themeStyles.mainColor,
				// 	textAlign: "left",
				// 	dy: 400 * sizeNum,
				// 	fontWeight: "bold",
				// 	serialNum: 2,
				// 	allInfoCallback({ drawArray }) {
				// 		return {
				// 			dx: (33 + priceLength) * sizeNum
				// 		};
				// 	}
				// },
				{
					type: "text",
					text:
						(this.goodsDetail.priceOut &&
							`原价  ￥${this.goodsDetail.priceOut}`) ||
						"",
					size: 12 * sizeNum,
					color: "#999999",
					textAlign: "left",
					dx: 16 * sizeNum,
					dy: 433 * sizeNum,

					lineThrough: {}
				},
				{
					type: "text",
					text: "长按二维码，进行购买",
					size: 12 * sizeNum,
					color: "#333333",
					textAlign: "left",
					dx: 16 * sizeNum,
					dy: 467 * sizeNum
				},
				{
					type: "image",
					url: data.qrUrl||"",
					dx: 219 * sizeNum,
					dy: 388 * sizeNum,

					infoCallBack(imageInfo) {
						return {
							dWidth: 86 * sizeNum,
							dHeight: 86 * sizeNum
						};
					}
				}
			];
		},
		//  
		toggleShareMask(type) {
			const timer = type === "show" ? 10 : 300;
			const state = type === "show" ? 1 : 0;
			this.showShareMask = 2;
			setTimeout(() => {
				console.log("啊啊");
				this.showShareMask = state;
			}, timer);
		},

		// 保存海报图片
		saveImage() {
			uni.saveImageToPhotosAlbum({
				filePath: this.posterObj.finalPath,
				success: res => {
					console.log("res", res);
					this.$api.showToast("成功保存");
					this.qrShow = false;
				},
				fail: error => {
					console.log("error", error);
					this.$api.showToast("保存失败");
				}
			});
		}
	}
};
</script>

<style lang='scss' scoped>
@import "@/pages/common/styles/goods/goodsDetail.scss";
</style>
